<template>
	<div>
		<div class="collapse-box w-full text-white">
			<div class="title">
				<div class="drop-down-icon"></div>
				<div class="info">设备总览，当前选中设备{{ device }}</div>
			</div>
			<div class="content">
				<div class="h-full w-full">
					<ops-table :tableData="rowData" title="服务器资源总览表" height="150px">
						<ops-table-column tableHead="mission" props="mission"></ops-table-column>
						<ops-table-column tableHead="company" props="company"></ops-table-column>
						<ops-table-column props="location" tableHead="location"></ops-table-column>
						<ops-table-column props="date" tableHead="date"></ops-table-column>
						<ops-table-column props="rocket" tableHead="rocket"></ops-table-column>
						<ops-table-column props="price" tableHead="price"></ops-table-column>
						<ops-table-column props="successful" tableHead="successful"></ops-table-column>
					</ops-table>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import OpsTable from "./components/OpsTable/OpsTable";

import { ref } from "vue";
import OpsTableColumn from "./components/OpsTable/OpsTableColumn";
const device = ref("device1");

const rowData = ref([
	{
		mission: "Voyager",
		company: "NASA",
		location: "Cape Canaveral",
		date: "1977-09-05",
		rocket: "Titan-Centaur ",
		price: 86580000,
		successful: true
	},
	{
		mission: "Apollo 13",
		company: "NASA",
		location: "Kennedy Space Center",
		date: "1970-04-11",
		rocket: "Saturn V",
		price: 3750000,
		successful: false
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	}
]);

// Column Definitions: Defines & controls grid columns.
// const colDefs = ref([
// 	{ field: "mission" },
// 	{ field: "company" },
// 	{ field: "location" },
// 	{ field: "date" },
// 	{ field: "price" },
// 	{ field: "successful" },
// 	{ field: "rocket" }
// ]);
</script>

<style lang="scss" scoped></style>
